<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">





  <link rel="alternate" href="/atom.xml" title="renhao" type="application/atom+xml">






<meta name="description" content="本文总结下面试中经常问到的 browser 问题。">
<meta property="og:type" content="article">
<meta property="og:title" content="前端面试总结 browser 部分">
<meta property="og:url" content="https://huangrenhao.gitee.io/2020/09/24/browser-interview/index.html">
<meta property="og:site_name" content="renhao">
<meta property="og:description" content="本文总结下面试中经常问到的 browser 问题。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://huangrenhao.gitee.io/2020/09/24/browser-interview/node-relation.png">
<meta property="og:updated_time" content="2020-11-10T01:43:01.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端面试总结 browser 部分">
<meta name="twitter:description" content="本文总结下面试中经常问到的 browser 问题。">
<meta name="twitter:image" content="https://huangrenhao.gitee.io/2020/09/24/browser-interview/node-relation.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://huangrenhao.gitee.io/2020/09/24/browser-interview/">





  <title>前端面试总结 browser 部分 | renhao</title>
  








<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>

<body itemscope="" itemtype="http://schema.org/WebPage" lang="zh-Hans">
  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope="" itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">renhao</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://huangrenhao.gitee.io/2020/09/24/browser-interview/">

    <span hidden itemprop="author" itemscope="" itemtype="http://schema.org/Person">
      <meta itemprop="name" content="renhao">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="renhao">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">前端面试总结 browser 部分</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-09-24T10:02:00+08:00">
                2020-09-24
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
                  <a href="/categories/interview/" itemprop="url" rel="index">
                    <span itemprop="name">interview</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2020/09/24/browser-interview/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count valine-comment-count" data-xid="/2020/09/24/browser-interview/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  1.3k
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  4
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>本文总结下面试中经常问到的 browser 问题。<a id="more"></a></p>
<h3 id="浏览器中一个脚本出错会不会影响其他脚本执行？为什么"><a href="#浏览器中一个脚本出错会不会影响其他脚本执行？为什么" class="headerlink" title="浏览器中一个脚本出错会不会影响其他脚本执行？为什么"></a>浏览器中一个脚本出错会不会影响其他脚本执行？为什么</h3><p>不会影响。<br>为什么？浏览器脚本怎么执行,顺序执行或异步并行执行？<br>出错脚本中的代码从出错的地方开始就不会向下执行，脚本是按照其先后顺序执行的（没有加上 async，加上了不保证顺序执行）。可能脚本之间相互独立不影响</p>
<h3 id="childNodes-与-children"><a href="#childNodes-与-children" class="headerlink" title="childNodes 与 children"></a>childNodes 与 children</h3><p>dom 树由多层几点构成，节点又分为多种类型，所有的节点都可以用 Node 接口来表示：</p>
<ul>
<li>元素节点：Node.ELEMENT_NODE(1)</li>
<li>特性节点：Node.ATTRIBUTE_NODE(2)</li>
<li>Node.TEXT_NODE(3)</li>
<li>共有 12 中节点</li>
</ul>
<p>Nodes 在 dom 树中的表示方式（文档中的节点关系）:</p>
<p><img src="/2020/09/24/browser-interview/node-relation.png" alt="链表关系图"></p>
<p>childNodes 包含了该节点下所有的节点，而 children 只有元素节点才有，只包含元素中同样还是元素的子节点</p>
<blockquote>
<p>firstElementChild、lastElementChild、previousElementSibling、nextElementSibling 分别对应图中 api 的元素版本（element 节点特有）</p>
</blockquote>
<h3 id="如何获取页面上的所有-dom-节点，dom-api-如何做的，时间复杂度是多少？"><a href="#如何获取页面上的所有-dom-节点，dom-api-如何做的，时间复杂度是多少？" class="headerlink" title="如何获取页面上的所有 dom 节点，dom api 如何做的，时间复杂度是多少？"></a>如何获取页面上的所有 dom 节点，dom api 如何做的，时间复杂度是多少？</h3><pre><code>function getAllNodes() {
    function _recursive (nodeList, res) {
        for (var i=0; i&lt;nodeList.length; i++) {
          if (nodeList[i].nodeType === 1) res.push(nodeList[i])
          nodeList[i].hasChildNodes() &amp;&amp; _recursive(nodeList[i].childNodes, res)
        }
    }

    var res = []
    var root = document.getElementsByTagName(&#39;html&#39;)
    _recursive(root, res)
    return res
}
</code></pre><p>document.getElementById 先序 dfs 遍历</p>
<h3 id="移动端适配"><a href="#移动端适配" class="headerlink" title="移动端适配"></a>移动端适配</h3><p>详情参考 [移动端适配](<a href="https://huangrenhao.gitee.io/2020/09/03/browser-yi-dong-duan-gua-pei/">https://huangrenhao.gitee.io/2020/09/03/browser-yi-dong-duan-gua-pei/</a></p>
<h3 id="重排与重绘"><a href="#重排与重绘" class="headerlink" title="重排与重绘"></a>重排与重绘</h3><p>详情参考 <a href="https://huangrenhao.gitee.io/2020/09/03/browser-repaint-reflow/">重排重绘</a></p>
<h3 id="浏览器进程"><a href="#浏览器进程" class="headerlink" title="浏览器进程"></a>浏览器进程</h3><p>详情参考 <a href="https://huangrenhao.gitee.io/2019/11/09/browser-process-render/">浏览器的多进程</a></p>
<p>经常会被问到 url 从输入到浏览器渲染页面的问题（按照以下几点展开）：</p>
<ul>
<li>dns 解析</li>
<li>tcp 三次握手</li>
<li>请求传输，接收响应</li>
<li>解析报文</li>
<li>解析 dom 树、css 树，构建 render 树</li>
<li>布局，第一次回流</li>
<li>tcp 四次挥手</li>
</ul>
<h3 id="onload-与-DOMContentLoad"><a href="#onload-与-DOMContentLoad" class="headerlink" title="onload 与 DOMContentLoad"></a>onload 与 DOMContentLoad</h3><ul>
<li><p>window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、css 文件）。可以使用<code>window.onload = ...</code>或 <code>window.addEventListener(&#39;load&#39;,...)</code>。</p>
</li>
<li><p>窗口加载事件：DOMContentLoaded，此事件触发时仅当 DOM 加载完成，不包括样式表、图片、flash 等。当文档中没有脚本时，浏览器解析完文档便能触发 DOMContentLoaded 事件；如果文档中包含脚本，则脚本会阻塞文档的解析，而脚本需要等位于脚本前面的css加载完才能执行。在任何情况下，DOMContentLoaded 的触发不需要等待图片等其他资源加载完成</p>
<ul>
<li>IE6、IE7不支持DOMContentLoaded，但它支持onreadystatechange事件，该事件的目的是提供与文档或元素的加载状态有关的信息。</li>
<li>更低的ie还有个特有的方法doScroll， 通过间隔调用：document.documentElement.doScroll(“left”);</li>
</ul>
<blockquote>
<p>将 js 放在尾部的原因？既然 dom 树完全生成好之后页面才能渲染出来，而浏览器又必须读完全部 html 才能生成完整 dom 树，这样说 script 不放在 body 底部是一样？</p>
<p>这个问题的关键在于 浏览器有个 first paint ，这个 first paint 不是在渲染树生成之后，浏览器为了更好的用户体验，会尝试尽快在屏幕上显示即浏览器可以渲染不完整的 dom 树和 css树，减少白屏时间，如果将 script 放到 header ，js将阻塞解析 dom，会影响到 first paint</p>
<p><a href="https://www.cnblogs.com/caizhenbo/p/6679478.html" target="_blank" rel="noopener">参考</a></p>
</blockquote>
</li>
</ul>
<h3 id="常见的-meta-字段"><a href="#常见的-meta-字段" class="headerlink" title="常见的 meta 字段"></a>常见的 meta 字段</h3><p>元数据（metadata）是关于数据的信息。标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。标签始终位于 head 元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。</p>
<ul>
<li>charset ： 文档所使用的字符编码，写在第一行</li>
<li>name、content： 名值对（当有 http-equiv 或 name 属性，需要有 content 属性进行说明）</li>
<li>http-equiv：并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。</li>
<li>viewport：content 参数<ul>
<li>width： viewport 宽度(数值/device-width)    </li>
<li>height： viewport 高度(数值/device-height)   </li>
<li>initial-scale： 初始缩放比例    </li>
<li>maximum-scale： 最大缩放比例    </li>
<li>minimum-scale： 最小缩放比例    </li>
<li>user-scalable： 是否允许用户缩放(yes/no)</li>
</ul>
</li>
</ul>
<h2 id="零散小知识"><a href="#零散小知识" class="headerlink" title="零散小知识"></a>零散小知识</h2><ul>
<li>html 是一种<strong>标记语言</strong>，而不是<strong>编程语言</strong></li>
<li>html中标签分为三种不同类型：<strong>块级元素</strong>、<strong>内联元素</strong>（行内元素）、<strong>内联块状元素</strong></li>
</ul>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2020/09/24/css-interview/" rel="next" title="前端面试总结 css 部分">
                <i class="fa fa-chevron-left"></i> 前端面试总结 css 部分
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2020/09/24/open-interview/" rel="prev" title="前端面试总结 开放性问题">
                前端面试总结 开放性问题 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
    </div>
  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">renhao</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">94</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">19</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#浏览器中一个脚本出错会不会影响其他脚本执行？为什么"><span class="nav-number">1.</span> <span class="nav-text">浏览器中一个脚本出错会不会影响其他脚本执行？为什么</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#childNodes-与-children"><span class="nav-number">2.</span> <span class="nav-text">childNodes 与 children</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何获取页面上的所有-dom-节点，dom-api-如何做的，时间复杂度是多少？"><span class="nav-number">3.</span> <span class="nav-text">如何获取页面上的所有 dom 节点，dom api 如何做的，时间复杂度是多少？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#移动端适配"><span class="nav-number">4.</span> <span class="nav-text">移动端适配</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#重排与重绘"><span class="nav-number">5.</span> <span class="nav-text">重排与重绘</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#浏览器进程"><span class="nav-number">6.</span> <span class="nav-text">浏览器进程</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#onload-与-DOMContentLoad"><span class="nav-number">7.</span> <span class="nav-text">onload 与 DOMContentLoad</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#常见的-meta-字段"><span class="nav-number">8.</span> <span class="nav-text">常见的 meta 字段</span></a></li></ol><li class="nav-item nav-level-2"><a class="nav-link" href="#零散小知识"><span class="nav-number"></span> <span class="nav-text">零散小知识</span></a></li></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">renhao</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">Site words total count&#58;</span>
    
    <span title="Site words total count">265.9k</span>
  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  










  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: false,
        notify: false,
        appId: '2P1xqUWiCoNm14MH4yhURlJi-gzGzoHsz',
        appKey: 'uJN0uagHIVgXtBO1OuLV9Ban',
        placeholder: 'Just go go',
        avatar:'mm',
        guest_info:guest,
        pageSize:'10' || 10,
    });
  </script>



  





  

  

  

  
  

  

  

  

</body>
</html>
